<template>
  <div class="gatewayinfo">
    <!--群调群控 tuningControl-->
    <div class="topcon">
                <div class="left-nav">
                     <!-- <div :class="['nav-item', {'active':tabindex == 1}]" @click="tabindex = 1">参数信息</div>
                     <div :class="['nav-item', {'active':tabindex == 2}]"  @click="tabindex = 2">设备信息</div> -->
                     <div :class="['nav-item', {'active':tabindex == 3}]"  @click="tabindex = 3">群调群控</div>
                </div>
                <div class="right-btn">
                </div>
    </div>
    <div class="con" v-show="tabindex == 1">
         <el-scrollbar style="height:100%;width: 100%;">
         <div class="mytitle">
             <span></span>厂站参数
         </div>
         <div class="mytable">
              <div class="items">
                 <div class="leftitem">逆变器命令间隔时间(秒)</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">故障频率上限(Hz)</div>
                 <div class="rightitem" v-show="!xinghaoFlag"><span>{{xinghao}}</span> <i class="el-icon-edit" @click="openInput('1')"></i></div>
                 <div class="rightitem" v-show="xinghaoFlag"> <el-input ref="myInput" v-model="xinghao" @blur='blurfn("1")'/></div>

              </div>
              <div class="items">
                 <div class="leftitem">全厂有功上限(MW)</div>
                 <div class="rightitem" v-show="!xiangmuFlag"><span>{{xiangmu}}</span> <i class="el-icon-edit" @click="openInput('2')"></i></div>
                 <div class="rightitem" v-show="xiangmuFlag"> <el-input ref="myInput2" v-model="xiangmu" @blur='blurfn("2")'/></div>

              </div>
              <div class="items">
                 <div class="leftitem">故障频率下限(Hz)</div>
                 <div class="rightitem" v-show="!shebeiIDFlag"><span>{{shebeiID}}</span> <i class="el-icon-edit" @click="openInput('3')"></i></div>
                 <div class="rightitem" v-show="shebeiIDFlag"> <el-input ref="myInput3" v-model="shebeiID" @blur='blurfn("3")'/></div>
              </div>
              <div class="items">
                 <div class="leftitem">全厂有功下限(MW)</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">AGC执行周期(秒)</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">有功调节死区(MW)</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">分钟级变化率(0->1)</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">单次容量变化(0->1)</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">防逆流参考值(MW)</div>
                 <div class="rightitem"></div>
              </div>
         </div>
         <div class="mytitle">
             <span></span>输入参数(tag)
         </div>
         <div class="mytable">
              <div class="items">
                 <div class="leftitem">I母频率</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">I母电压</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">II母频率</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">II母电压</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">重大事故退出信号</div>
                 <div class="rightitem"></div>
              </div>
              <div class="items">
                 <div class="leftitem">电网频率</div>
                 <div class="rightitem"></div>
              </div>
         </div>
          </el-scrollbar>
    </div>
    <div class="con" v-show="tabindex == 2">
         <el-table :data="leftTable" height="100%" stripe  style="width: 100%;" >
                                        <el-table-column prop="device_number"  width="120" label="设备号" align="center"> </el-table-column>
                                        <el-table-column prop="device_name"  label="设备名称"> </el-table-column>
                                        <el-table-column  width="300" label="操作" fixed="right" align="center"> 
                                             <template #default="{row}">
                                                    <div class="mysort">
                                                        <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                                             <img src="../../assets/btnImg/edit2.png" alt="" style="margin:0px 26px" @click="editDevice(row)">
                                                        </el-tooltip>
                                                        
                                                    </div>
                                                </template>
                                        </el-table-column>
         </el-table>
    </div>
     <div class="con3" v-show="tabindex == 3">
          <div class="topbtn">
             <span></span>
             <el-button type="primary" @click="addbingwang" class="last-el-button">新增并网点</el-button>
          </div>
          <div class="mytable">
           <el-table id="demo" ref="table" height="100%" border  stripe :data="tableData" 
            style="width: 100%">
            <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
            <el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
            <el-table-column prop="desc" label="描述" min-width="200" ></el-table-column>
            <el-table-column prop="offset" label="偏移值" min-width="120"> </el-table-column>
            <el-table-column prop="unit_type" label="类型" min-width="160"> </el-table-column>
            <el-table-column prop="registor" label="寄存器地址" min-width="160"> </el-table-column>
            <el-table-column prop="group_total" label="群组总功率(W)" min-width="180"> </el-table-column>
    
            <el-table-column label="操作" width="180" align="center">
              <template #default="{row}">
                <div class="public-flex" >
                  <span style="color:#368ed9;cursor: pointer;margin-right:12px" @click="viewinverters(row)">查看逆变器</span>
                  <span style="color:#368ed9;cursor: pointer;margin-right:12px" @click="editbingwang(row)">编辑</span>
                  <!-- <span style="color:red;cursor: pointer;" @click="delbingwang(row)">删除</span> -->
                </div>
              </template>
            </el-table-column>
          </el-table>
         </div>
          <!-- 新增/修改并网点 -->
           <el-dialog width="500px" draggable  :title="caozuoType"  v-model="addeditflagline">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">描述：</div>
                                <el-input v-model="nowItem.desc" :disabled='caozuoType =="修改并网点"' placeholder="请输入描述"></el-input>
                            </div>
                         </div>
                          
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">偏移值：</div>
                                <el-input v-model="nowItem.offset" placeholder="请输入偏移值"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">类型：</div>
                                <el-input v-model="nowItem.unit_type" placeholder="请输入类型"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">寄存器：</div>
                                <el-input v-model="nowItem.registor" placeholder="请输入寄存器"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">群组总功率：</div>
                                <el-input v-model="nowItem.group_total" placeholder="请输入群组总功率"></el-input>
                            </div>
                         </div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                     <template #footer>
                                 <div class="dialog-footer">
                                 <el-button  @click="addeditflagline = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addpassageway" type="primary">确 定</el-button>
                                 </div>
                    </template>
                  
                      
                    
           </el-dialog>
          <div class="el-loading-mask" v-show="isMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
         </div>
         <!-- 新增/修改 -->
           <el-dialog width="1100px" draggable  :title="caozuoType2"  v-model="nibianqi">
                    <div class="choicedio" style="height:450px;padding:12px">
                         <div class="topbtn">
                             <span></span>
                             <el-button type="primary" @click="addnibianqi" class="last-el-button">新增逆变器</el-button>
                         </div>
                         <div class="mytable">
                            <el-table id="demo" ref="table" height="100%" border  stripe :data="invertersTableData"  style="width: 100%">
                                    <el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
                                    <el-table-column prop="name" label="名称" min-width="140" ></el-table-column>
                                    <el-table-column prop="id" label="设备ID" width="100" ></el-table-column>
                                    <el-table-column prop="type" label="类型" width="100"> </el-table-column>
                                    <el-table-column prop="state" label="状态值" width="90"> </el-table-column>
                                    <el-table-column prop="addr" label="寄存器地址" width="120"> </el-table-column>
                                    <el-table-column prop="enable" label="状态" width="90" align="center"> 
                                      <template #default="{row}">
                                        <div class="public-flex" >
                                        <span style="color:green" v-show="row.enable == 1">启用</span>
                                        <span style="color:red" v-show="row.enable != 1">禁用</span>
                                        </div>
                                    </template>
                                    </el-table-column>
                                    <el-table-column prop="rated" label="额定功率(W)" width="120"> </el-table-column>
                                    <el-table-column label="操作" width="120" align="center">
                                    <template #default="{row}">
                                        <div class="public-flex" >
                                        <span style="color:#368ed9;cursor: pointer;margin-right:12px" @click="editnibianqi(row)">编辑</span>
                                        <!-- <span style="color:red;cursor: pointer;" @click="delnibianqi(row)">删除</span> -->
                                        </div>
                                    </template>
                                    </el-table-column>
                                </el-table>
                         </div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                     <template #footer>
                                 <div class="dialog-footer">
                                 <el-button  @click="nibianqi = false" class="last-el-button">关 闭</el-button>
                                 </div>
                    </template>
                   
                      
                    
           </el-dialog>
            <!-- 新增/修改逆变器 -->
           <el-dialog width="500px" draggable  :title="caozuoType3"  v-model="addInverters">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">设备名称：</div>
                                <el-input v-model="nowItemnibianqi.name" placeholder="请输入设备名称"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">设备ID：</div>
                                <el-input v-model="nowItemnibianqi.id" placeholder="请输入设备ID" :disabled='caozuoType3 != "新增逆变器"'></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">通道号：</div>
                                <el-input v-model="nowItemnibianqi.channel_id" placeholder="请输入通道号" :disabled='caozuoType3 != "新增逆变器"'></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">状态值：</div>
                                <el-input v-model="nowItemnibianqi.state" placeholder="请输入状态值"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">类型：</div>
                                <el-input v-model="nowItemnibianqi.type" placeholder="请输入类型"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">寄存器地址：</div>
                                <el-input v-model="nowItemnibianqi.addr" placeholder="请输入寄存器地址"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">状态：</div>
                                <el-select v-model="nowItemnibianqi.enable" placeholder="请选择状态" style="width:100%"> 
                                                <el-option
                                                   v-for="item in enableList"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                                </el-option>
                                 </el-select>
                                
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">额定功率(W)：</div>
                                <el-input v-model="nowItemnibianqi.rated" placeholder="请输入额定功率"></el-input>
                            </div>
                         </div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                      <template #footer>
                                 <div class="dialog-footer">
                                 <el-button  @click="addInverters = false" >取 消</el-button>
                                  <el-button  class="last-el-button" @click="addInvertersFn" type="primary">确 定</el-button>
                                 </div>
                    </template>
                  
                      
                    
           </el-dialog>
    </div>
  </div>
</template>

<script>
import {getgridConnectGroup,addgridConnectGroup,editgridConnectGroup,delgridConnectGroup,getInverters,saveInverters,editInverters,delInverters} from "../../api/groupTuningControl";
export default {


  data() {
    return {
       xinghao:"",
       xiangmu:"",
       shebeiID:"",
       xinghaoFlag:false,
      xiangmuFlag:false,
      shebeiIDFlag:false,
      tabindex:3,
      leftTable:[],
      //群调群控
      tableData:[],
      invertersTableData:[],
      caozuoType:"新增并网点",
      caozuoType2:"逆变器",
      caozuoType3:"新增逆变器",
      addeditflagline:false,
      diaisMask:false,
      addInverters:false,
      nibianqi:false,
      isMask:false,
      nowItem:{
         desc:"",
        offset:"",
        unit_type:"",
        group_total:"",
      },
      nowBingwangdian:{},
      enableList:[
        {
          label:"启用",
          value:true,
        },
        {
          label:"禁用",
          value:false,
        },
      ],
      nowItemnibianqi:{
        name:"",
        type:"",
        reg_addr:"",
        enable:1,
        rated:"",
        grid_connect_group_id:"",
      },
      editRowNibianqi:{},
    };
  },

  mounted() {
  this.getList()
  },

  methods: {
    openInput(type){
        if(type == 1){
          this.xinghaoFlag = true
         //   this.$refs.myInput.focus();
        }else if(type == 2){
          this.xiangmuFlag = true
         //   this.$refs.myInput2.focus();
        }else {
           this.shebeiIDFlag = true
            // this.$refs.myInput3.focus();
        }
     },
     blurfn(type){
        if(type == 1){
          this.xinghaoFlag = false
        }else if(type == 2){
          this.xiangmuFlag = false
        }else {
           this.shebeiIDFlag = false
        }
     },
     editDevice(){},
     //群调群控
      getList(){
         this.isMask = true
         getgridConnectGroup().then(res => { 
            this.isMask = false
               if(res.code == 200){
                //    console.log("获取并网点列表",res);
                //    console.log("this.nowBingwangdian",this.nowBingwangdian);
                   this.tableData = res.data.mapper
                   if(this.nowBingwangdian.desc != undefined){
                       var arr =  this.tableData.filter(item => item.desc == this.nowBingwangdian.desc)
                       if(arr.length != 0){
                          this.invertersTableData = arr[0].devices
                       }
                   }


               }
         })
    },
    addbingwang(){
        this.caozuoType = "新增并网点"
        this.nowItem = {
         desc:"",
        offset:"",
        unit_type:"",
        group_total:"",
      }
      this.addeditflagline = true
    },
    editbingwang(row){
           this.nowItem = row
           this.caozuoType = "修改并网点"
           this.addeditflagline = true
    },
     //新增修改并网点
     addpassageway(){
        if(this.nowItem.desc === ""){
              this.$message({showClose: true,message: '描述不能为空',type: 'warning'});
              return
        }
        if(this.nowItem.offset === ""){
              this.$message({showClose: true,message: '偏移值不能为空',type: 'warning'});
              return
        }
        if(this.nowItem.unit_type === ""){
              this.$message({showClose: true,message: '类型不能为空',type: 'warning'});
              return
        }
        if(this.nowItem.registor === ""){
              this.$message({showClose: true,message: '寄存器地址不能为空',type: 'warning'});
              return
        }
        if(this.nowItem.group_total === ""){
              this.$message({showClose: true,message: '群组总功率不能为空',type: 'warning'});
              return
        }
        if(this.caozuoType == "新增并网点"){
             var arr1 = this.tableData.filter(item => item.desc == this.nowItem.desc)
             if(arr1.length != 0){
                this.$message({showClose: true,message: '描述已存在，请重新输入',type: 'warning'});
                return
             }
              var dd = {
                  desc:this.nowItem.desc,
                  offset:Number(this.nowItem.offset),
                  unit_type:Number(this.nowItem.unit_type),
                  registor:this.nowItem.registor,
                  group_total:Number(this.nowItem.group_total),
              }
              this.diaisMask = true
              addgridConnectGroup(dd).then(res => {
                   this.diaisMask = false
                   if(res.code == 200){
                      this.addeditflagline = false
                      this.getList()
                      this.$message({showClose: true,message: '新增成功',type: 'success'});
                   }else {
                      this.$message({showClose: true,message: res.msg ? res.msg : '新增失败',type: 'error'});
                   }
              })
        }else {
             var dd = {
                //   id:Number(this.nowItem.id),
                  desc:this.nowItem.desc,
                  offset:Number(this.nowItem.offset),
                  unit_type:Number(this.nowItem.unit_type),
                  registor:this.nowItem.registor,
                  group_total:Number(this.nowItem.group_total),
              }
              this.diaisMask = true
              editgridConnectGroup(dd).then(res => {
                   this.diaisMask = false
                   if(res.code == 200){
                     this.addeditflagline = false
                      this.getList()
                      this.$message({showClose: true,message: '修改成功',type: 'success'});
                   }else {
                      this.getList()
                      this.$message({showClose: true,message: res.msg ? res.msg : '修改失败',type: 'error'});
                   }
              })
        }
     },
     //删除并网点
     delbingwang(row){
          this.$confirm(`是否要删除此并网点？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.isMask = true
               delgridConnectGroup({'id':row.id}).then(res => {
                  if(res.code == 200){
                      this.getList()
                      this.$message({showClose: true,message: '删除成功',type: 'success'});
                   }else {
                    this.isMask = false
                      this.$message({showClose: true,message: res.msg ? res.msg : '删除失败',type: 'error'});
                   }
                 
               }).catch(error => {
               })
              
        
                      
            }).catch(() => {
              // ...
            });
     },
     //查看逆变器
     viewinverters(row){
         this.nowBingwangdian = row
         this.nibianqi = true
        //  this.diaisMask = true
        //   row.devices.forEach(item => item.enable ? 1 : 0)
          this.invertersTableData = row.devices
        //  this.getNibianqi()
     },
     //查询逆变器
     getNibianqi(){
        //  this.invertersTableData = res
    //   getInverters({'grid_connect_group_id':this.nowBingwangdian.id}).then(res => {
    //           console.log("查询逆变器",res);
    //           this.diaisMask = false
    //           if(res != undefined){
    //               this.invertersTableData = res
    //           }
    //      })
     },
     //新增逆变器
     addnibianqi(){
       this.caozuoType3 = '新增逆变器'
       this.nowItemnibianqi = {
            name:"",
            type:"",
            reg_addr:"",
            enable:"",
            rated:"",
            grid_connect_group_id:this.nowBingwangdian.id,
        }
        this.addInverters = true
     },
     //修改逆变器
     editnibianqi(row){
       this.caozuoType3 = '修改逆变器'
       this.editRowNibianqi = row
       this.nowItemnibianqi = {
            name:row.name,
            type:row.type,
            addr:row.addr,
            enable:row.enable,
            rated:row.rated,
            state:row.state,
            id:row.id,
            channel_id:row.channel_id,
        }
        this.addInverters = true
     },
     //确定新增修改逆变器
     addInvertersFn(){
         if(this.nowItemnibianqi.name === ""){
              this.$message({showClose: true,message: '逆变器名称不能为空',type: 'warning'});
              return
        }
        if(this.nowItemnibianqi.addr === ""){
              this.$message({showClose: true,message: '寄存器地址不能为空',type: 'warning'});
              return
        }
        if(this.nowItemnibianqi.type === ""){
              this.$message({showClose: true,message: '类型不能为空',type: 'warning'});
              return
        }
        if(this.nowItemnibianqi.rated === ""){
              this.$message({showClose: true,message: '额定功率不能为空',type: 'warning'});
              return
        }
        if(this.caozuoType3 == "新增逆变器"){
              var dd = {
                  desc:this.nowBingwangdian.desc,
                  name:this.nowItemnibianqi.name,
                  id:this.nowItemnibianqi.id,
                  channel_id:this.nowItemnibianqi.channel_id,
                  type:(this.nowItemnibianqi.type),
                  addr:(this.nowItemnibianqi.addr),
                  enable:(this.nowItemnibianqi.enable),
                  rated:(this.nowItemnibianqi.rated),
                  state:(this.nowItemnibianqi.state),
              }
            //   console.log("新增",dd);
              this.diaisMask = true
              saveInverters(dd).then(res => {
                   this.diaisMask = false
                   if(res.code == 200){
                      this.addInverters = false
                      this.getList()
                      this.$message({showClose: true,message: '新增成功',type: 'success'});
                   }else {
                      this.$message({showClose: true,message: res.msg ? res.msg : '新增失败',type: 'error'});
                   }
              })
        }else {
              var dd = {
                  desc:this.nowBingwangdian.desc,
                  channel_id:this.editRowNibianqi.channel_id,
                  id:this.editRowNibianqi.id,
                  name:this.nowItemnibianqi.name ,
                  type:(this.nowItemnibianqi.type),
                  addr:(this.nowItemnibianqi.addr),
                  enable:(this.nowItemnibianqi.enable),
                  rated:(this.nowItemnibianqi.rated),
                  state:(this.nowItemnibianqi.state),
              }
              this.diaisMask = true
              editInverters(dd).then(res => {
                   this.diaisMask = false
                   if(res.code == 200){
                     this.addInverters = false
                      this.getList()
                      this.$message({showClose: true,message: '修改成功',type: 'success'});
                   }else {
                      this.$message({showClose: true,message: res.msg ? res.msg : '修改失败',type: 'error'});
                   }
              })
        }
     },
     //删除逆变器
     delnibianqi(row){
          this.$confirm(`是否要删除此逆变器？`,'提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                this.diaisMask = true
               delInverters({'id':row.id}).then(res => {
                  if(res.code == 200){
                      this.getNibianqi()
                      this.$message({showClose: true,message: '删除成功',type: 'success'});
                   }else {
                    this.diaisMask = false
                      this.$message({showClose: true,message: res.msg ? res.msg : '删除失败',type: 'error'});
                   }
                 
               }).catch(error => {
               })
              
        
                      
            }).catch(() => {
              // ...
            });
     },
  },
};
</script>
<style lang="scss" scoped>
    .gatewayinfo {
         width: 100%;
         height: 100%;
         position: relative;
         .topcon  { 
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left-nav {
                    display: flex;
                    .nav-item {
                        width: 96px;
                        height: 34px;
                        text-align: center;
                        line-height: 36px;
                        cursor: pointer;
                        border: 1px solid #E6E6E6;
                        color: #666666;
                        
                        &.active {
                            background-color: #fff;
                            color: #1A1A1A;
                            border-color: transparent;
                        }
                    }
                }
                .right-btn { 
                    display: flex;
                }
                
         }
         .con {
             width: 100%;
             height: calc(100% - 36px);
             background-color: #fff;
             padding: 12px;
             box-sizing: border-box;
             position: relative;
             .mytitle {
                 width: 100%;
                 height: 36px;
                 background-color: #F5F5F5;
                 border-radius: 4px;
                 display: flex;
                 align-items: center;
                 span {
                     display: inline-block;
                     width: 3px;
                     height: 18px;
                     background-color: #2178F1;
                     margin-left: 12px;
                     margin-right: 6px;
                     border-radius: 3px;
                 }
             }
             .mytable {
                 width: 100%;
                 display: flex;
                 flex-wrap: wrap;
                 margin-top: 12px;
                 margin-bottom: 20px;
                 .items {
                     width: 50%;
                     height: 48px;
                     display: flex;
                     border: 1px solid #E6E6E6;
                     box-sizing: border-box;
                     .leftitem {
                         width: 180px;
                         height: 100%;
                         background-color: #F5F5F5;
                         border-right: 1px solid #E6E6E6;
                         display: flex;
                         align-items: center;
                         font-size: 14px;
                         color: #1A1A1A;
                         padding-left: 12px;
                         box-sizing: border-box;
                     }
                     .rightitem {
                         width: calc(100% - 180px);
                         height: 100%;
                         display: flex;
                         align-items: center;
                         font-size: 14px;
                         color: #1A1A1A;
                         padding:0px 12px;
                         box-sizing: border-box;
                         justify-content: space-between;
                         i {
                            font-size: 16px;
                            margin-left: 10px;
                            color: #2178F1;
                            cursor: pointer;
                         }
                     }
                 }
             }
         }
         .con3 {
             width: 100%;
             height: calc(100% - 36px);
             padding: 12px;
             box-sizing: border-box;
             background-color: #fff;
             .leftname {
             width: 80px !important;
             min-width: 80px !important;
         }
             .topbtn {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 margin-bottom: 12px;
              }
              
              .mytable {
                 width: 100%;
                 height: calc(100% - 42px);
                 .public-flex {
                     span {
                         font-size: 14px;
                     }
                 }
              }
         }
    }
</style>